<template>
  <el-form-item>
    <p>请选择充电桩编号：</p>
    <p></p>
  </el-form-item>
  <el-form-item>
    <el-radio-group v-model="form.S_id">
      <el-radio label="001"/>
      001
      <el-radio label="002"/>
      002
      <el-radio label="003"/>
      003
      <el-radio label="004"/>
      004
      <el-radio label="005"/>
      005
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <p>充电桩编号为：</p>
    {{ this.form.S_id }}
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查看排队信息</el-button>
  </el-form-item>

  <el-table :data="form.queue" align="center" stripe style="width: 75%">
    <el-table-column prop="queue_id" label="当前排队号" width="100"/>
    <el-table-column prop="user_id" label="用户ID" width="100"/>
    <el-table-column prop="request_power" label="请求充电量" width="100"/>
    <el-table-column prop="time_in_queue" label="排队时长" width="130"/>
    <el-table-column prop="capcity" label="车辆电池容量" width="130"/>
  </el-table>

</template>

<script>
import axios from 'axios';

export default {
  name: 'ViewTheWaitingCars',
  data() {
    return {
      form: {
        S_id: '',
        num: -1,
        queue: [],
      },
    };
  },
  methods: {
    onSubmit() {
      const path = '/api/admin/charge_queue';
      axios.get(path, {
        params: {
          name: this.form.S_id,
        },
      })
        .then((res) => {
          this.form = res.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<style>

</style>
